* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

body{
    background-image: url(./img/世界/img稻妻城.jpg);
    background-size: cover; /*让背景图在整个容器的中间(适合于背景图比容器小或者背景图比容器大)*/
}

header {
  height: 66px;
  background-color: rgba(0, 0, 0, 0.65);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

header nav {
  display: flex;
}

header nav a {
  color: #fff;
  font-size: 20px;
  border: 1px solid white;
  padding: 5px;
  margin-right: 30px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s; /*让导航阴影显示柔和一点,有一个过渡的效果*/
}

header nav a:hover {
  box-shadow: 0 0 10px white; /*盒子阴影*/
}

.main {
  /* 计算高度:视口的区域-导航栏的高度  */
  height: calc(100vh - 66px); /*这样计算出来的高度适用任何屏幕和任何浏览器*/
  display: flex;
  /* 使用flex的属性来水平和垂直居中 */
  /* justify-content: center;
  align-items: center; */
}

.main .content {
  width: 1000px;
  height: 300px;
  /* 父元素是flex容器后,子元素也可以通过margin:auto;来水平和垂直居中 */
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  transform: .2s;
}

.main .content .item {
  width: 150px;
  height: 200px;
  background-color: rgba(255, 255, 255, .35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 10px;
}

.main .content .item:hover{
    cursor: pointer;
    box-shadow: 0 0 30px black;
}

.content .item img {
  width: 100px;
}

.content .item span{
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 10px black; /*文字阴影*/
    letter-spacing: 5px; /*字母空格：文字与文字之间的间距*/
}